<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery+CSS3过渡动画模态窗口特效 - 站长素材</title>

<link rel="stylesheet" type="text/css" href="lib/demo.css" />
<link rel="stylesheet" type="text/css" href="dist/jquery.niftymodals.css" />  

</head>
<body>
<div class="container">
	<div class="main clearfix">
		<div class="column">
			<p>There are many possibilities for modal overlays to appear. Here are some modern ways of showing them using CSS transitions and animations.</p>
		</div>
		<div class="column">
			<button class="md-trigger" data-modal="modal-1">Fade in &amp; Scale</button>
			<button class="md-trigger" data-modal="modal-2">Slide in (right)</button>
			<button class="md-trigger" data-modal="modal-3">Slide in (bottom)</button>
			<button class="md-trigger" data-modal="modal-4">Newspaper</button>
			<button class="md-trigger" data-modal="modal-5">Fall</button>
			<button class="md-trigger" data-modal="modal-6">Side Fall</button>
			<button class="md-trigger" data-modal="modal-7">Sticky Up</button>
			<button class="md-trigger" data-modal="modal-8">3D Flip (horizontal)</button>
			<button class="md-trigger" data-modal="modal-9">3D Flip (vertical)</button>
			<button class="md-trigger" data-modal="modal-10">3D Sign</button>
			<button class="md-trigger" data-modal="modal-11">Super Scaled</button>
			<button class="md-trigger" data-modal="modal-12">Just Me</button>
			<button class="md-trigger" data-modal="modal-13">3D Slit</button>
			<button class="md-trigger" data-modal="modal-14">3D Rotate Bottom</button>
			<button class="md-trigger" data-modal="modal-15">3D Rotate In Left</button>
			<button class="md-trigger" data-modal="modal-16">Blur</button>
			<!-- special modal that will add a perspective class to the html element -->
			<button class="md-trigger md-setperspective" data-modal="modal-17">Let me in</button>
			<button class="md-trigger md-setperspective" data-modal="modal-18">Make way!</button>
			<button class="md-trigger md-setperspective" data-modal="modal-19">Slip from top</button>
		</div>
	</div>
</div><!-- /container -->
<!-- All modals added here for the demo. You would of course just have one, dynamically created -->
<div class="md-container md-effect-1" id="modal-1">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-2" id="modal-2">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-3" id="modal-3">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-4" id="modal-4">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-5" id="modal-5">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-6" id="modal-6">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-7" id="modal-7">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-8" id="modal-8">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-9" id="modal-9">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-10" id="modal-10">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-11" id="modal-11">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-12" id="modal-12">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-13" id="modal-13">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-14" id="modal-14">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-15" id="modal-15">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-16" id="modal-16">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-17" id="modal-17">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-18" id="modal-18">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-19" id="modal-19">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-container md-effect-20" id="modal-20">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
				<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>
<div class="md-overlay"></div><!-- the overlay element -->

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="dist/jquery.niftymodals.js"></script>
<script>
  $(document).ready(function() {
	 
		$('.md-trigger').on('click',function(){

			var modal = $(this).data('modal');
			$("#" + modal).niftyModal();
		});
	 
  });
</script> 
<script>
	// this is important for IEs
	var polyfilter_scriptpath = '/lib/js/';
</script>

<script src="lib/js/cssParser.js"></script>
<script src="lib/js/css-filters-polyfill.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>